<template>
    <div class="manageLive">
        <div style="width:1030px;height:450px;text-align:left;">
            <div class="fig1">
                <img src="../../assets/manage_2.jpg">
                <div class="figca1">
                    <h3 style="margin-left:8px;">
                        当前活动：速致直播开业啦！快来领取红包吧！
                        <el-button type="danger" size="small">付费观看</el-button>
                        <span>弹幕 <el-switch v-model="words" on-text="" off-text=""></el-switch></span>
                    </h3>
                    <p>累计人数：<span style="margin-right:50px;">3336</span>当前观看：<span style="margin-right:50px;">988</span>最高并发：<span style="margin-right:50px;">70</span>累计时长：<span>2225min</span></p>
                </div>
            </div>
            <div class="fig2">
                <div style="height:80px;">
                    <img src="../../assets/liveIncome.png" style="width:40px;height:40px;margin-top:30px;margin-left:20px;display:block;float:left;">
                    <span style="float:left;margin-top:28px;margin-left:10px;"><span style="color:#62ACF4;">￥98000.00</span><br> 直播收益</span>
                </div>
                <div style="height:80px;margin-top:240px;margin-left:15px;">
                    <div style="width:60px;margin-top:10px;text-align:center;display:table-cell;">
                        <img src="../../assets/redbag.png" style="width:50px;height:50px;">
                        <p style="color:#62ACF4;margin-top:-5px;">抽奖</p>
                    </div>
                    <div style="width:0px;padding-left:30px;margin-top:10px;text-align:center;display:table-cell;">
                        <img src="../../assets/redbag.png" style="width:50px;height:50px;">
                        <p style="color:#62ACF4;margin-top:-5px;">发红包</p>
                    </div>
                </div>
                <div style="height:80px;background:#F1F1F1;line-height:80px;">
                    <router-link to="/manageShare"><el-button type="primary" style="margin-left:20px;">分享与嵌入</el-button></router-link>
                    <router-link to="/manage"><el-button type="primary" style="margin-left:60px;background:#BDC3CF;border-color:#BDC3CF;">关闭直播</el-button></router-link>
                </div>
            </div>
        </div>
        <br><br>
        <div style="margin-top:15px;float:left;">
            <el-button type="primary">发起投票</el-button>
            <el-button type="primary">发起问卷</el-button>
            <el-button type="primary" style="background:#38ACB5;border-color:#38ACB5;">发起一键购买</el-button>
        </div>
        <br><br><br>
        <div style="width:600px;margin-top:10px;">
            <el-input v-model="url" style="width:85%;"></el-input>
            <el-button type="primary" style="width:15%;margin-left:-5px;">一键复制</el-button>
        </div>
        <table style="width:1000px;margin-top:20px;margin-bottom:40px;border-radius:5px;border:1px solid #DFDFDF;">
            <tr style="height:60px;line-height:60px;background:#F1F1F1;">
                <th style="color:#62ACF4;">评论详情</th>
                <th>活动简介</th>
            </tr>
            <tr style="height:100px;">
                <td colspan=2>
                    <table style="width:1000px;">
                        <tr>
                            <td rowspan="2"><img src="../../assets/header_1.jpg"></td>
                            <td style="width:540px;text-align:left;font-weight:bold;">会飞的鱼<span style="font-weight:normal;color:#838383;margin-left:20px;">2016-12-28</span></td>
                            <td>
                                <el-button size="mini" style="width:80px;">置顶评论</el-button>
                                <el-button size="mini" style="width:80px;">删除评论</el-button>
                                <el-button size="mini" style="width:80px;">禁言</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align:left;">擎天柱、大黄蜂、威震天等角色都有了较为深刻的角色塑造，不是一出来就打打打，变变变。个别片段擎天柱的......</td>
                        </tr>
                    </table>
                    <hr style="width:1000px;border:1px solid #DFDFDF;margin-top:10px;">
                </td>
            </tr>
            <tr style="height:100px;">
                <td colspan=2>
                    <table style="width:1000px;">
                        <tr>
                            <td rowspan="2"><img src="../../assets/header_2.jpg"></td>
                            <td style="width:540px;text-align:left;font-weight:bold;">会飞的鱼<span style="font-weight:normal;color:#838383;margin-left:20px;">2016-12-28</span></td>
                            <td>
                                <el-button size="mini" style="width:80px;">置顶评论</el-button>
                                <el-button size="mini" style="width:80px;">删除评论</el-button>
                                <el-button size="mini" style="width:80px;">禁言</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align:left;">血脉喷张，热血沸腾，目瞪口呆等等词汇就是用在这些地方的。特效，已经很好的诠释了当今世界现有的CG技术......</td>
                        </tr>
                    </table>
                    <hr style="width:1000px;border:1px solid #DFDFDF;margin-top:10px;">
                </td>
            </tr>
            <tr style="height:100px;">
                <td colspan=2>
                    <table style="width:1000px;">
                        <tr>
                            <td rowspan="2"><img src="../../assets/header_3.jpg"></td>
                            <td style="width:540px;text-align:left;font-weight:bold;">会飞的鱼<span style="font-weight:normal;color:#838383;margin-left:20px;">2016-12-28</span></td>
                            <td>
                                <el-button size="mini" style="width:80px;">置顶评论</el-button>
                                <el-button size="mini" style="width:80px;">删除评论</el-button>
                                <el-button size="mini" style="width:80px;">禁言</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align:left;">无可挑剔的效果，无可挑剔的场面，这也许才正是所有对这类电影感兴趣的人真正所在平时。</td>
                        </tr>
                    </table>
                    <hr style="width:1000px;border:1px solid #DFDFDF;margin-top:10px;">
                </td>
            </tr>
            <tr style="height:100px;">
                <td colspan=2>
                    <table style="width:1000px;">
                        <tr>
                            <td rowspan="2"><img src="../../assets/header_4.jpg"></td>
                            <td style="width:540px;text-align:left;font-weight:bold;">会飞的鱼<span style="font-weight:normal;color:#838383;margin-left:20px;">2016-12-28</span></td>
                            <td>
                                <el-button size="mini" style="width:80px;">置顶评论</el-button>
                                <el-button size="mini" style="width:80px;">删除评论</el-button>
                                <el-button size="mini" style="width:80px;">禁言</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align:left;">每一集故事的结构和过程都雷同，但是令我们念念不忘的是一种情怀，我们怀念的不是故事本身，而是金刚们变形......</td>
                        </tr>
                    </table>
                    <hr style="width:1000px;border:1px solid #DFDFDF;margin-top:10px;">
                </td>
            </tr>
            <tr style="height:60px;">
                <td colspan=2>加载更多</td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                words: true,
                url: '推流地址： DAEFEDFAE DCAS754'
            };
        },
        methods: {
        }
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .manageLive{
        width: 1030px;
        margin-top: 90px;
        margin-left: 95px;
    }

    .manageLive .fig1{
        width: 650px;
        height: 480px;
        border: 1px solid #DFDFDF;
        border-radius: 5px;
        display: block;
        float: left;
    }

    .manageLive .fig1 img{
        /*width: 600px;
        height: 82%;*/
        margin-bottom: 10px;
    }

    .manageLive .fig1 .figca1 h3>span{
        font-weight: normal;
        float: right;
        margin-right: 10px;
    }

    .manageLive .fig1 .figca1 p{
        margin-top: 5px;
        margin-left: 8px;
    }

    .manageLive .fig1 .figca1 p>span{
        color: #62ACF4;
    }

    .manageLive .fig2{
        width: 300px;
        height: 480px;
        border: 1px solid #DFDFDF;
        border-radius: 5px;
        display: block;
        float: left;
        margin-left: 20px;
    }
</style>